﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SetListManager.Models.Song>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Song List
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
    <link href="../../Content/DataTables/css/demo_table.css" rel="stylesheet" type="text/css" />
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

<%--Initialize our DataTable via Javascript.  Uses the DataTable jQuery plugin.--%>
    <script type="text/javascript">
    function DeleteSong(songid)
    {
    alert ("TBD: Implement function to delete song: " + songid);
    }
        function LaunchEditDialog(songid) {

            //This launches the edit dialog and is called when someone clicks on edit.
            //Set the fields in the dialog first
            var song = $.ajax("/songs/retrievesong/" + songid, {async: false, dataType: "json"});
            var songobj = $.parseJSON(song.responseText);
            $(edittitle).val(songobj[0].Title);
            $(editsoloist).val(songobj[0].Soloist);
            $(editkey).val(songobj[0].Key);
            $(edittempo).val(songobj[0].Tempo);
            $(editgenre).val(songobj[0].Genre);
            $(editduration).val(songobj[0].Duration.FormatMinSec);
            $(editusage).val(songobj[0].Usage);

            $(editdialog).dialog("open");
        }
        function LaunchDetailsDialog(songid) {
            //This launches the details dialog and is called when someone clicks on details.
            //Set the fields in the dialog first
            var song = $.ajax("/songs/retrievesong/" + songid, { async: false, dataType: "json" });
            var songobj = $.parseJSON(song.responseText);
            $(detailstitle).text(songobj[0].Title);
            $(detailssoloist).text(songobj[0].Soloist);
            $(detailskey).text(songobj[0].Key);
            $(detailstempo).text(songobj[0].Tempo);
            $(detailsgenre).text(songobj[0].Genre);
            $(detailsduration).text(songobj[0].Duration.FormatMinSec);
            $(detailsusage).text(songobj[0].Usage);

            $(detailsdialog).dialog("open");

        }
        $(document).ready(function () {
            $(editdialog).dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "OK": function () { $(editdialog).dialog("close"); },
                    "Cancel": function () { $(editdialog).dialog("close"); }
                }
            });
            $(detailsdialog).dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "OK": function () { $(detailsdialog).dialog("close"); }
                    }
                
            });
            $('#myDataTable').dataTable({
                "iDisplayLength": 50,
                "sPaginationType": "full_numbers",
                "sAjaxSource": "/Songs/RetrieveSongList",
                "bStateSave": true,
                "bProcessing": true,
                "aoColumns": [
                    { "mDataProp": "Title" },
                    { "mDataProp": "Soloist" },
                    { "mDataProp": "Key" },
                    { "mDataProp": "Tempo" },
                    { "mDataProp": "Genre" },
                    { "mDataProp": "Duration.FormatMinSec" },
                    { "mDataProp": "UsageText" },
                    { "mDataProp": "Actions",
                        "bUseRendered": true,
                        "fnRender": function (obj) {
                            return '<input type="button" value="Details" onclick="LaunchDetailsDialog(' + obj.aData["SongID"] + ')"></input> ' +
                            '<a href="/Songs/Edit/' + obj.aData["SongID"] + '">Edit</a> | ' +
                            '<a href="/Songs/Delete/' + obj.aData["SongID"] + '">Delete</a>';
                        }
                    }
                    ]
                });

                // Original ajax/json code:
                // '<input type="button" value="Edit" onclick="LaunchEditDialog(' + obj.aData["SongID"] + ')"></input>' +
                // '<input type="button" value="Delete" onclick="DeleteSong(' + obj.aData["SongID"] + ')"></input>'

            $('#newsong').keypress(function (event) {
                if (this.textpending == null) this.textpending = 'false';
                if (this.textpending == 'false') {
                    this.value = '';
                    $(this).css('font-style', 'normal');
                    $(this).css('color', 'black');
                    this.textpending = 'true';
                }
                else {
                    if (event.which == 13) {
                        alert('New Song: ' + this.value);
                        //alert($('#myDataTable').dataTable().fnGetData(2, 8));
                        $('#myDataTable').dataTable().fnAddData({ "SongID": 55, "Title": this.value, "Soloist": "Pete", "Key": "A", "UsageText": "Current", "Tempo": "120", "Genre": null, "Duration": { "Minutes": 3, "Seconds": 25, "FormatMinSec": "3:25", "FormatHrsMin": "0 hrs 3 min", "FormatSeconds": "205"} }

                          );

                        this.value = 'Enter new song...';
                        $(this).css('font-style', 'italic');
                        $(this).css('color', 'gray');
                        this.textpending = 'false';
                    }
                }
            });

        });

           
    
    </script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

        <div id="editbuttons_rt">
        <%: Html.ActionLink("Create New", "Create", null, new { @class = "link-button" })%>
        </div>

    <h1>Song List - All Songs</h1>
    <p>
        <%: Html.ActionLink("Show Song Groups", "Groups") %>
    </p>
    
    <input id='newsong'  title='New Song' type='text' value='Enter new song...' style='font-style:italic;color:gray' />
<%-- This placeholder table will be populated by the DataTable jQuery code, which
     is initialized above
--%>
    
    <table id="myDataTable" class="display">
        <thead>
            <tr>
            <th style="width: 200px;">
                Title
            </th>
            <th>
                Soloist
            </th>
            <th>
                Key
            </th>
            <th>
                Tempo
            </th>
            <th>
                Genre
            </th>
            <th>
                Duration
            </th>
            <th>
                Usage
            </th>
            <th style="width: 150px;"></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <p>
        <%: Html.ActionLink("Create New", "Create") %>
    </p>

    <div id="editdialog" title="Edit Song"><p>Edit the song fields below. Click OK to save your changes.</p>
    <p>Title: <input type="text" id="edittitle" /></p>
    <p>Soloist: <input type="text" id="editsoloist" /></p>
    <p>Key: <input type="text" id="editkey" /></p>
    <p>Tempo: <input type="text" id="edittempo" /></p>
    <p>Genre: <input type="text" id="editgenre" /></p>
    <p>Duration: <input type="text" id="editduration" /></p>
    <p>Usage: <input type="text" id="editusage" /></p>
    </div>
     <div id="detailsdialog" title="Song Details"><p>All fields for selected song.</p>
    <p><b>Title:</b> </b><span id="detailstitle"></span></p>
    <p><b>Soloist:</b> <span id="detailssoloist"></span></p>
    <p><b>Key:</b> <span id="detailskey"></span></p>
    <p><b>Tempo:</b> <span id="detailstempo"></span></p>
    <p><b>Genre:</b> <span id="detailsgenre"></span></p>
    <p><b>Duration:</b> <span id="detailsduration"></span></p>
    <p><b>Usage:</b> <span id="detailsusage"></span></p>
    </div>
</asp:Content>

